<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>svg</title>
    <style>
      .svg {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <!-- 
      svg 主要用途：
        1. 数据大屏展示
        2. 字体图标
          相对过去字体图标，svg优势减少请求数量
     -->
    <svg class="svg" width="1200" height="400">
      <!-- 画线段 -->
      <line x1="100" y1="100" x2="200" y2="200" stroke="#000"></line>
      <line x1="200" y1="200" x2="300" y2="100" stroke="#000"></line>
      <line x1="300" y1="100" x2="100" y2="100" stroke="#000"></line>
      <!-- 画折线 -->
      <polyline
        points="100 250, 200 380, 300 250"
        fill-opacity="0"
        stroke="#000"
      />
      <!-- 画矩形 -->
      <rect x="350" y="100" width="100" height="50" fill="green"></rect>
      <rect
        x="350"
        y="300"
        width="100"
        height="50"
        fill-opacity="0"
        stroke="#000"
      ></rect>
      <!-- 画圆 -->
      <circle cx="550" cy="100" r="50" fill="yellow"></circle>
      <circle cx="550" cy="300" r="50" fill-opacity="0" stroke="#000"></circle>
      <!-- 画椭圆 -->
      <ellipse
        cx="800"
        cy="200"
        rx="100"
        ry="50"
        fill-opacity="0"
        stroke="#000"
      ></ellipse>
      <!-- 画任意图形 -->
      <path
        d="
          M 900 150,
          L 1100 150,
          L 950 280,
          L 1000 80,
          L 1050 280,
          Z
        "
        fill-opacity="0"
        stroke="#000"
      ></path>
    </svg>

    <svg
      t="1672281017375"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="3357"
      width="16"
      height="16"
    >
      <path
        d="M846.933333 238.933333h-140.8L646.4 149.333333c-6.4-10.666667-17.066667-17.066667-29.866667-17.066666h-209.066666c-12.8 0-23.466667 6.4-29.866667 17.066666l-59.733333 89.6H177.066667c-57.6 0-106.666667 46.933333-106.666667 106.666667v426.666667c0 57.6 46.933333 106.666667 106.666667 106.666666h672c57.6 0 106.666667-46.933333 106.666666-106.666666v-426.666667c-2.133333-59.733333-49.066667-106.666667-108.8-106.666667z m34.133334 533.333334c0 19.2-14.933333 34.133333-34.133334 34.133333H177.066667c-19.2 0-34.133333-14.933333-34.133334-34.133333v-426.666667c0-19.2 14.933333-34.133333 34.133334-34.133333h160c12.8 0 23.466667-6.4 29.866666-17.066667L426.666667 206.933333h170.666666l59.733334 89.6c6.4 10.666667 17.066667 17.066667 29.866666 17.066667h160c19.2 0 34.133333 14.933333 34.133334 34.133333v424.533334z"
        fill="#1296db"
        p-id="3358"
      ></path>
      <path
        d="M512 364.8c-96 0-174.933333 78.933333-174.933333 174.933333 0 96 78.933333 174.933333 174.933333 174.933334 96 0 174.933333-78.933333 174.933333-174.933334 0-96-78.933333-174.933333-174.933333-174.933333z m0 279.466667c-57.6 0-104.533333-46.933333-104.533333-104.533334s46.933333-104.533333 104.533333-104.533333 104.533333 46.933333 104.533333 104.533333-46.933333 104.533333-104.533333 104.533334z"
        fill="#1296db"
        p-id="3359"
      ></path>
    </svg>
  </body>
</html>
